<template>
  <div class="wrap">
    <el-collapse>
      <el-collapse-item :title="title1" name="1" style="font-size: 16px">
        <TableComponent :height="height" @change="onTableChange1" :total="total1" :columns="shareholdColumns" :data="shareholdTable" :tableOption="tableOption" :stripe="stripe" :pageOption="pageOption1.page" />
      </el-collapse-item>
      <el-collapse-item :title="title2" name="2">
        <TableComponent :height="height" @change="onTableChange2" :total="total2" @rowClick="handleRowClick" :columns="shareCompanyColumns" :data="shareCompanyTable" :tableOption="tableOption" :stripe="stripe" :pageOption="pageOption2.page" />
      </el-collapse-item>
      <el-collapse-item :title="title4" name="4">
        <TableComponent :height="height" @change="onTableChange4" :total="total4" @rowClick="handleLimitd" :columns="limitCompanyColumns" :data="limitCompanyTable" :tableOption="tableOption" :stripe="stripe" :pageOption="pageOption4.page" />
      </el-collapse-item>
      <el-collapse-item :title="title3" name="3">
        <TableComponent :height="height" @change="onTableChange3" :total="total3" @rowClick="handlePartner" :columns="parentColumns" :data="partnerTable" :tableOption="tableOption" :stripe="stripe" :pageOption="pageOption3.page" />
      </el-collapse-item>
      <el-collapse-item :title="title5" name="5">
        <TableComponent :height="height" @change="onTableChange5" :total="total5" @rowClick="handleBranch" :columns="branchColumns" :data="branchTable" :tableOption="tableOption" :stripe="stripe" :pageOption="pageOption5.page" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import TableComponent from '@/components/Table/table.vue'
import { shareholdColumns, shareCompanyColumns, parentColumns, limitCompanyColumns, branchColumns } from '../js/index.js'
import { shareVo2List, incorporated, partner, llc, branchOrgList } from '@/api/modules/propertyRight.js'
export default {
  components: {
    TableComponent
  },
  data() {
    return {
      shareholdColumns,
      shareCompanyColumns,
      parentColumns,
      limitCompanyColumns,
      branchColumns,
      shareholdTable: [],
      shareCompanyTable: [],
      partnerTable: [],
      limitCompanyTable: [],
      branchTable: [],
      tableOption: {
        isShowOperate: false,
        operateWidth: '100px'
      },
      pageOption1: {
        page: {
          pageNum: 1,
          pageSize: 10
        },
        cmhkId: ''
      },
      pageOption2: {
        page: {
          pageNum: 1,
          pageSize: 10
        },
        cmhkId: ''
      },
      pageOption3: {
        page: {
          pageNum: 1,
          pageSize: 10
        },
        cmhkId: ''
      },
      pageOption4: {
        page: {
          pageNum: 1,
          pageSize: 10
        },
        cmhkId: ''
      },
      pageOption5: {
        page: {
          pageNum: 1,
          pageSize: 10
        },
        cmhkId: ''
      },
      stripe: true,
      height: 300,
      total1: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      total5: 0,
      title1: '',
      title2: '',
      title3: '',
      title4: '',
      title5: ''
    }
  },
  methods: {
    initData(params) {
      this.pageOption1.cmhkId = params.cmhkId
      this.pageOption2.cmhkId = params.cmhkId
      this.pageOption3.cmhkId = params.cmhkId
      this.pageOption4.cmhkId = params.cmhkId
      this.pageOption5.cmhkId = params.cmhkId
      shareVo2List(this.pageOption1).then(res => {
        this.shareholdTable = res.data.body.list
        this.total1 = res.data.body.total
        this.title1 = '证券账户'+'('+this.total1+')'
      })
      incorporated(this.pageOption2).then(res => {
        this.shareCompanyTable = res.data.body.list
        this.total2 = res.data.body.total
        this.title2 = '股份公司'+'('+this.total2+')'
      })
      partner(this.pageOption3).then(res => {
        this.partnerTable = res.data.body.list
        this.total3 = res.data.body.total
        this.title3 = '合伙企业'+'('+this.total3+')'
      })
      llc(this.pageOption4).then(res => {
        this.limitCompanyTable = res.data.body.list
        this.total4 = res.data.body.total
        this.title4 = '有限责任公司'+'('+this.total4+')'
      })
      branchOrgList(this.pageOption5).then(res => {
        this.branchTable = res.data.body.list
        this.total5 = res.data.body.total
        this.title5 = '分支机构'+'('+this.total5+')'
      })
    },
    // 股份有限公司跳转新页面
    handleRowClick(data) {
      let params = {}
      params = Object.assign(data, {registerType: '01', registerTypeTran: '股份有限公司'})
      let routeUrl = this.$router.resolve({
        path: '/detail',
        query: params
      })
      window.open(routeUrl.href, '_blank')
    },
    // 合伙企业跳转新页面
    handlePartner(data) {
      let params = {}
      params = Object.assign(data, {registerType: '04', registerTypeTran: '合伙企业'})
      let routeUrl = this.$router.resolve({
        path: '/detail',
        query: params
      })
      window.open(routeUrl.href, '_blank')
    },
    // 有限责任公司
    handleLimitd(data) {
      let params = {}
      params = Object.assign(data, {registerType: '02', registerTypeTran: '有限责任公司'})
      let routeUrl = this.$router.resolve({
        path: '/detail',
        query: params
      })
      window.open(routeUrl.href, '_blank')
    },
    // 分支机构
    handleBranch(data) {
      let params = {}
      params = Object.assign(data, {registerType: '05', registerTypeTran: '分支机构'})
      let routeUrl = this.$router.resolve({
        path: '/detail',
        query: params
      })
      window.open(routeUrl.href, '_blank')
    },
    // 证券账户分页
    onTableChange1(val) {
      this.pageOption1.page.pageNum = val.pageNum
      this.pageOption1.page.pageSize = val.pageSize
      shareVo2List(this.pageOption1).then(res => {
        this.shareholdTable = res.data.body.list
        this.total1 = res.data.body.total
      })
    },
    onTableChange2(val) {
      this.pageOption2.page.pageNum = val.pageNum
      this.pageOption2.page.pageSize = val.pageSize
      incorporated(this.pageOption2).then(res => {
        this.shareCompanyTable = res.data.body.list
        this.total2 = res.data.body.total
      })
    },
    onTableChange3(val) {
      this.pageOption3.page.pageNum = val.pageNum
      this.pageOption3.page.pageSize = val.pageSize
      partner(this.pageOption3).then(res => {
        this.partnerTable = res.data.body.list
        this.total3 = res.data.body.total
      })
    },
    onTableChange4(val) {
      this.pageOption4.page.pageNum = val.pageNum
      this.pageOption4.page.pageSize = val.pageSize
      llc(this.pageOption4).then(res => {
        this.limitCompanyTable = res.data.body.list
        this.total4 = res.data.body.total
      })
    },
    onTableChange5(val) {
      this.pageOption5.page.pageNum = val.pageNum
      this.pageOption5.page.pageSize = val.pageSize
      branchOrgList(this.pageOption5).then(res => {
        this.branchTable = res.data.body.list
        this.total5 = res.data.body.total
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .wrap {
    height: 100%;
  }
</style>
<style>
  .el-collapse-item__header {
    font-size: 15px;
    font-weight: 500;
    padding-left: 30px;
  }
  .el-collapse-item__wrap {
    padding-left: 20px;
  }
</style>
